<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水滴</title>
	<style>
		* {
			margin:0;
			padding:0;
			box-sizing:border-box;
		}
		body {
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			background-color: rgb(2, 158, 255);
			margin-top: 20px;
		}
		#water {
			margin-top: 200px;
			height: 300px;
			width: 300px;
			border-radius:59% 41% 63% 37% / 22% 26% 74% 63%;
			box-shadow:inset 10px 20px 30px rgba(0,0,0,0.5),
				10px 10px 20px rgba(0,0,0,0.3),
				15px 15px 30px rgba(0,0,0,0.05),
				inset -10px -10px 15px rgba(225,225,225,0.8);
			animation: action 3s linear infinite alternate;
	}
	#water::after{
		content: '';
		width: 20px;
		height: 20px;
		position: absolute;
		top: 240px;
		left: 48%;
		transform: translateY(50px);
		background-color: rgba(225,225,225,0.8);
		border-radius:50% 50% 63% 37% / 54% 63% 37% 46% ;
	}
	#water::before{
		content: '';
		width: 10px;
		height: 10px;
		position: absolute;
		top: 265px;
		left: 47%;
		transform: translateY(50px);
		background-color: rgba(225,225,225,0.8);
		border-radius: 54% 63% 37% 46% / 50% 50% 63% 37%  ;
	}
	@keyframes action {
		25%{
			border-radius: 70% 30% 42% 58% / 70% 64% 36% 30%  ;

		}
		50%{
			border-radius: 70% 30% 42% 58% / 32% 64% 36% 68%  ;

		}
		100%{
			border-radius: 70% 30% 74% 26% / 53% 33% 67% 47% ;
		}
	}
</style>
</head>

<body>
    <div id="water"></div>
</body>
</html>
